<template>
  <div>
    <el-cascader v-if="show" ref="areaSelect" :options="areaList" placeholder="请选择省市区" :props="{
              value: 'id',
              label: 'name',
              lazy: true,
              lazyLoad: getNextAreaList
            }" @change="editCity"></el-cascader>
  </div>
</template>

<script>
import { findAreaAll } from "@/api/basic/area/area";
export default {
  name: "SelectCity",
  props: {
    
  },
  data() {
    return {
      show:false,
      areaList: [],//城市列表
    }
  },
  created() {
    this.getAreaList({ level: 1 })
  },
  methods: {
    // 获取area信息
    getAreaList(param) {
      findAreaAll(param).then(response => {
        this.show =true
        this.areaList = response
      })
    },
    // 及联查找懒加载
    getNextAreaList(node, resolve) {
      findAreaAll({ pid: node.data.id }).then(response => {
        let nodes = response;
        if (node.data.level === 2) {
          nodes.map(item => {
            item.leaf = true
          })
        }
        resolve(nodes)
      })
    },
    // form设置area信息
    editCity(value) {
      // this.form.areaId = value[value.length - 1]
      let nodes = this.$refs.areaSelect.getCheckedNodes()[0];
      let city = '';
      for (let index = 0; index < nodes.pathLabels.length; index++) {
        const name = nodes.pathLabels[index];
        city += name + '/'
      }

      // this.form.city = city.substring(0, city.length - 1)
      this.$emit('getValue',{
        areaId:value[value.length - 1],
        city:city.substring(0, city.length - 1)
      })
    },
  }
};
</script>
<style lang="scss" scoped>
</style>
